<template>
	<div class="order-buy-info">
		<div>{{ getTextDefault("buy_realname", "未知用户") }}</div>
		<div>{{ getTextDefault("buy_mobile", "未知手机") }}</div>
		<div>
			<span>
				<el-popover placement="top-start" title="收货信息" width="200" trigger="hover">
					<template #reference>
						<el-icon color="#00b7ff" style="cursor:pointer;"><el-icon-van /></el-icon>
					</template>
					<div>
						<div>收件人：{{ orderRow.recipient_name }}</div>
						<div>联系方式：{{ orderRow.recipient_mobile }}</div>
					</div>
				</el-popover>
			</span>
			&nbsp;
			<span v-show="orderRow.remark">
				<el-popover
					placement="top-start"
					title="买家留言"
					width="200"
					trigger="hover"
					:content="orderRow.remark"
				>
					<template #reference>
						<el-icon color="#ff8300" style="cursor:pointer;"><sc-icon-message /></el-icon>
					</template>
				</el-popover>
			</span>
			<span v-show="!orderRow.remark">
				<el-icon><sc-icon-message /></el-icon>
			</span>
		</div>
	</div>
</template>

<script>
export default {
	name: "order-buy-info",
	props: {
		orderRow: { type: Object, default: () => {} }
	},
	methods: {
		getTextDefault(_fieldName, _default) {
			if (!this.orderRow[_fieldName]) {
				return _default;
			} else {
				return this.orderRow[_fieldName];
			}
		}
	}
};
</script>

<style scoped lang="scss">
.order-buy-info{
	.el-icon-truck{
		&.on{
			cursor: pointer;
			color: #00b7ff;
		}
	}
	.el-icon-message-solid{
		&.on{
			color: #ff8300;
			cursor: pointer;
		}
	}
}
</style>
